{% from "utils.html" import submit_button, submit_button_with_attrs %}
{% extends "layout.html" %}
{% block title %}User{% endblock %}
{% block content %}
<div id="profile" class="vcentered space-y-2">
  {% if userdata %}
  <h1 class='text-4xl mb-4'>{{ userdata['username'] }}</h1>
  <form action="{{ auth_base_url }}/logout" method="POST">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
    {{ submit_button('Log out') }}
  </form>
  <p> <b>Notice:</b>
    By continuing to use the Hail system, you agree that you have reviewed and will be bound by the Hail <a href="https://batch.hail.is/tos" target="_blank" class="text-blue-600 hover:underline">Terms of Service</a>
    and have read the <a href="https://batch.hail.is/privacy" target="_blank" class="text-blue-600 hover:underline">Privacy Policy</a>. If not you must log out and stop using the Hail system immediately.
  </p>
  {% if cloud == "gcp" %}
  <p><b>Google Service Account: </b>{{ userdata['display_name'] }}</p>
  {% endif %}
  {% if cloud == "azure" %}
  <p><b>Azure Service Principal Display Name: </b>{{ userdata['display_name'] }}</p>
  <p><b>Azure Service Principal Application ID: </b>{{ userdata['hail_identity'] }}</p>
  {% endif %}
  <p><b>Trial Billing Project: </b>{{ userdata['trial_bp_name'] }}</p>
  <form action="{{ auth_base_url }}/copy-paste-token" method="post">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
    {{ submit_button('Get a copy-paste login token') }}
  </form>
  {% else %}
  <h1 class='text-4xl mb-4'>Log in to continue</h1>
  {% if next_page %}
  <p>You must sign up or log in to continue to {{ next_page }}</p>
  {% else %}
    <p>You must sign up or log in to continue</p>
  {% endif %}
  
  <div class="mb-4">
    <label class="flex items-center">
      <input type="checkbox" id="tosCheckbox" class="mr-2" onchange="updateButtons()">
      <span>I have reviewed and agree to the <a href="https://batch.hail.is/tos" target="_blank" class="text-blue-600 hover:underline">Terms of Service</a>
        and have read the <a href="https://batch.hail.is/privacy" target="_blank" class="text-blue-600 hover:underline">Privacy Policy</a>
      </span>
    </label>
  </div>

  <div>
    <form action="{{ auth_base_url }}/login" method="GET">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
      {% if next_page %}
      <input type="hidden" name="next" value="{{ next_page }}" />
      {% endif %}
      {{ submit_button_with_attrs('Log in', 'id=loginButton disabled') }}
    </form>

    <div class="pt-4">
      <p class="text-gray-600 mb-2">No account yet? Click below to sign up:</p>
      <form action="{{ auth_base_url }}/signup" method="GET">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
        {% if next_page %}
        <input type="hidden" name="next" value="{{ next_page }}" />
        {% endif %}
        {{ submit_button_with_attrs('Sign up', 'id=signupButton disabled') }}
      </form>
    </div>
  </div>

  <script>
    function updateButtons() {
      const checkbox = document.getElementById('tosCheckbox');
      const signupButton = document.getElementById('signupButton');
      const loginButton = document.getElementById('loginButton');
      
      signupButton.disabled = !checkbox.checked;
      loginButton.disabled = !checkbox.checked;
      
      // Update button styles based on state
      [signupButton, loginButton].forEach(button => {
        if (button.disabled) {
          button.classList.add('opacity-50', 'cursor-not-allowed');
          button.classList.remove('hover:bg-blue-700');
        } else {
          button.classList.remove('opacity-50', 'cursor-not-allowed');
          button.classList.add('hover:bg-blue-700');
        }
      });
    }

    // Initialize button states
    updateButtons();
  </script>
  {% endif %}

  <p>
    The Hail system records your email address and IP address. Your email address
    is recorded so that we can authenticate you. Your IP address is tracked as part of our
    surveillance of all traffic to and from the Hail system. This broad surveillance enables the
    protection of the Hail system from malicious actors.
  </p>

</div>
{% endblock %}
